<template>
    <div>
        <van-nav-bar
                title="景点"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
        />
    </div>
    <div>
        <van-search
                v-model="seamsg"
                show-action
                label="景点"
                placeholder="请输入搜索关键词"
                @search="onSearch"
        >
            <template #action>
                <div @click="onClickButton(seamsg)">搜索</div>
            </template>
        </van-search>
    </div>
    <div>
        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="image in images" :key="image">
                <img class="img1" :src="image.img" />
            </van-swipe-item>
        </van-swipe>
    </div>
    <div>
        <van-grid direction="horizontal" :column-num="4">
                <van-grid-item url="https://github.com">
                    <img class="img2" src="../assets/sight/popular/cuxiaohuodong.png"/>
                    <p>促销</p>
                </van-grid-item>
            <van-grid-item url="https://github.com">
                <img class="img2" src="../assets/sight/popular/jingdian.png"/>
                <p>景点</p>
            </van-grid-item>
            <van-grid-item url="https://github.com">
                <img class="img2" src="../assets/sight/popular/gonglve.png"/>
                <p>攻略</p>
            </van-grid-item>
            <van-grid-item url="https://github.com">
                <img class="img2" src="../assets/sight/popular/difangtechan.png"/>
                <p>特产</p>
            </van-grid-item>
        </van-grid>
    </div>
    <div>
        <van-grid>
            <van-grid-item>
                <span style="width: 100px">
                    <img id="faxian" src="../assets/sight/find/faxian.png"><label style="font-size: 15px;color:#c529c2;">发现好地方</label>
                </span>
            </van-grid-item>
        </van-grid>
        <van-row gutter="10">
            <van-col span="24">
                <van-card class="card1" v-for="g in msg"
                        :tag="g.tag"
                        :desc="g.name"
                        :price="g.price"
                        :title="g.title"
                        :thumb="g.img"
                >
                <template #footer>
                    <van-button size="mini" @click="onCheck(g.id)">查看</van-button>
                </template>
                </van-card>
            </van-col>
        </van-row>
    </div>
</template>

<script>
    import { Toast } from 'vant';
    export default {
        name: "SightView",
        data() {
            return {
                images : [
                    {img:require('@/assets/sight/carousel/1.jpg')},
                    {img:require('@/assets/sight/carousel/2.jpg')},
                    {img:require('@/assets/sight/carousel/3.jpg')},
                ],
                seamsg:"",
                msg:null,
                }
            },
        setup(){
            const onClickLeft = () => history.back();
            return {
                onClickLeft,
            };
        },
            created() {
            var that=this;
                this.axios.get("http://localhost:8081/api/sight/queryHotTop.do").then(res => {
                    if (res.data.code == 200) {
                        that.msg=res.data.data;
                    } else {
                        Toast(res.data.msg);
                    }
                })
            },
        methods:{
            onClickButton(title){
                this.$router.push({ path: 'sightsearch', query: { title: title } })
            },
            onCheck(id){
                this.$router.push({ path: 'sightdetail', query: { id: id } })
            }
        }
    }
</script>

<style scoped>
.img1{
    width: 100%;
    height: 10rem;
}
    .img2{
        width: 40px;
        height: 40px;
    }
    p{
        font-size: 5px;
    }
    #faxian{
        width: 20px;
        height: 20px;
    }
    .card1{
        height: 150px;
    }

</style>